<template>
    <div class=" wrap-table user-p8">
        <div class="headerTop_ukl">
            <ul class="clearfix">
                <li>
                    <p class="p1"><img src="../../assets/images/icon_yanjiuduixiang.png" alt=""/><span>研究对象</span></p>
                    <p class="p3">{{userBasic.Surname}}({{userBasic.ResearchNo}})</p>
                </li>
                <li>
                    <p class="p1"><img src="../../assets/images/icon_ganyuzu.png" alt=""/>{{userBasic.GroupType |GroupType}}</p>
                    <p  class="p3" v-if="userBasic.Period!='3'"><span v-if="userBasic.GroupType==1">{{userBasic.IntensityOfIntervention |IntensityOfIntervention}}</span></p>
                    <p  class="p3" v-else><span v-if="userBasic.GroupType==1">{{userBasic.ChildIntensityOfIntervention |IntensityOfIntervention}}</span></p>
                </li>
                <li>
                    <p class="p1"><img src="../../assets/images/icon_huaiyunqi.png" alt=""/>{{userBasic.Period |Period}}</p>
                    <p class="p3"><span v-if="userBasic.Period==2">预产期：{{userBasic.ExpectedDate}},{{userBasic.PregnancyWeek}}</span></p>
                     <p class="p3"><span v-if="userBasic.Period==3">出生日期：{{userBasic.ChildBirthDate}},{{userBasic.ChildAge}}, {{userBasic.ChildSex|ChildSex}} </span></p>
                      <p class="p3"><span v-if="userBasic.Period==4">出生日期：{{userBasic.ChildBirthDate}},{{getChildAge2(userBasic.ChildBirthDate)}}, {{userBasic.ChildSex|ChildSex}} </span></p>
                </li>
            </ul>
        </div>
        <div class="center-waps">
            <el-button
              v-if= "userBasic.GroupType =='1'"
              @click="CreateTable()">
              生成母乳喂养自我效能表
            </el-button>
        </div>
        <template>
            <el-table
                    :data="tableData"
                    border
                    v-loading="loading"
                    height="500"
                    element-loading-text="加载中"
                    :default-sort = "{prop: 'CreateTime', order: 'descending'}"
                    style="width: 100%"
                    >
                <el-table-column
                        prop="CreateTime"
                        label="生成时间"
                        :show-overflow-tooltip="true"
                        sortable
                        align="center"
                        min-width="120">
                </el-table-column>
                <el-table-column
                        prop="Creater"
                        label="操作人员"
                        align="center"
                        :show-overflow-tooltip="true"
                        min-width="120">
                </el-table-column>
                <el-table-column
                        prop="FillInTime"
                        label="填写时间"
                        align="center"
                        :show-overflow-tooltip="true"
                        min-width="120">
                </el-table-column>
                
                <el-table-column
                        prop="Period"
                        align="center"
                        :formatter="PeriodFilter"
                        label="填写时研究阶段"
                        min-width="100">
                </el-table-column>
                <el-table-column
                        align="center"
                        fixed="right"
                        label="操作"
                        min-width="60">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" label="查看"  @click="handleEdit(scope.$index, scope.row)">
                            查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        
        <el-dialog title="母乳喂养自我效能表" :visible.sync="dialogForm1" width="60%":append-to-body="true" top="0"
                   :close-on-click-modal="false">
            <div>
                <p class="dialog-p-title">对于下列每一项陈述，请选择最能说明您对母乳喂养自信程度的答案。请选出最接近您感觉的数字。答案没有对错之分。</p>
                <div v-for="(item,index) in questionData" class="dialog-div" :key="index*2.222">
                    <p class="dialog-p1">{{index+1}}.{{item.Question}}</p>
                    <el-radio-group v-model="item.Answer">
                        <el-radio v-for="(op,sortIndex) in answerData" :label="op.id" :key="op.id"
                                  @change="changeRadio(item,sortIndex)">
                            {{op.value}}
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogForm1 = false">取 消</el-button>
                <el-button type="primary" @click="handleSure">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {mapGetters} from 'vuex'
import {getChildAge2} from '@/utils/index'
import {filterPeriod,filterIntensityOfIntervention} from '@/utils/localDic'
export default {
    name:'userP1',
    data() {
        return {
            tableData: [],
            pageId: 1,
            total: null,
            loading: false,
            pageSize: 10,
            dialogForm1: false,
            Period: '',
            maxHeight: '',
            itemType: '',
            sysId: '',
            mobile: '',
            researchNo: '',
            userBasic:{
                Surname: '',
                ResearchNo: '',
                ExpectedDate: '',
                Period: '',
                IntensityOfIntervention: '',
                GroupType: ''
            },
            breastSelfEfficacyId:'', //sys_id暂存
            CreateTime: '', // 创建时间暂存
            questionData: [],  //问题集合
            answerData: [  //答案及合
              {value: '一点都不自信', id:'1'},
              {value: '不太自信', id:'2'},
              {value: '有点自信', id:'3'},
              {value: '自信', id:'4'},
              {value: '非常自信', id:'5'}],
            PeriodFilter(row, column, cellValue, index){
               return filterPeriod(cellValue)
            },
            // headerArr:['抑郁症筛查量表','爱丁堡产后抑郁量表','广泛性焦虑量表'],
            // titleArr:['我们接下来会问您一些关于您是否存在抑郁症状及其程度的问题。您是否愿意回答这些问题？（如果是，请您回答所有的问题）','我们接下来要问您一些备孕妇女可能的抑郁和焦虑症状的问题，这并不是用来做诊断，您是否愿意回答这些问题？（如果是，请您回答所有的问题）','我们现在会问您一些关于您是否存在广泛性焦虑症状及其程度的问题。您是否愿意回答这些问题？（如果是，请您回答所有的问题）'],
            // contentArr:['在过去的两个星期，有多少时候您受到以下任何问题所困扰？','请选择最能反应您过去七天感受的一个答案，而不仅仅是您今天的感受','在过去的两个星期内，您有多少次受到下列情况的干扰？'],
        }
    },
    components:{

    },
    props:{
        changeIndex:{
            type: String,
        }
    },
    beforeMount:function() {
        let that=this;
        let appHeight=$(window).height();
        let autoheight=(appHeight-300)+'px'
        that.maxHeight=autoheight
    },
    watch:{
        changeIndex:function(index){
            if(index == '11'){
                this.getList()
            }
        }
    },
    computed:{
        ...mapGetters([
                'resechObj',
                'userIcon',
                'UserDic'
            ]),
        LASTTIME:function(){
            let dateAlary=new Date(this.userBasic.ExpectedDate)
            return new Date(dateForm(dateAlary.setMonth(dateAlary.getMonth()-9,dateAlary.getDate()-7)))
        },
        yunzhou:function(){
            return parseInt((WeeksBetw(new Date,this.LASTTIME))/7)
        },
        yuntianshu:function(){
            return parseInt((WeeksBetw(new Date,this.LASTTIME))%7)
        },
        birthWeek(){
            return parseInt((WeeksBetw(new Date,new Date(this.userBasic.ChildBirthDate)))/7)
        },
        birthDay(){
            return parseInt((WeeksBetw(new Date,new Date(this.userBasic.ChildBirthDate)))%7)
        }
    },
    created() {

    },

    mounted:function(){
        let that=this;
        that.sysId=that.$route.query.id;
        that.mobile=that.$route.query.mobile;
        that.researchNo=that.$route.query.researchNo;
        that.getList();
        this.getBreastSelfEfficacy()
    },
    methods: {
         getChildAge2(val){ //获取儿童期2年龄
            return val && getChildAge2(val)
        },
        handleEdit(index,row){   //编辑
        this.dialogForm1 = true;
        console.log(row)
            this.breastSelfEfficacyId = row.SYS_ID
            this.CreateTime = row.CreateTime
            this.service({
                url:'/ResearchObject/GetBreastSelfEfficacyDetail',
                method:'get',
                params:{
                  breastSelfEfficacyId: this.breastSelfEfficacyId
                }}).then(res=>{
                    console.log(res)
                    this.questionData= res.dtData;
                }).catch(data=>{
            })
        },
        changeRadio(item,index){   //change选中索引值，与前台保持一致
            item.AnswerIndex=index;
        },
        handleSure() {
          let data = this.questionData;
          let isTrue =  data.every((val,index)=>{
              return val.Answer != " "
          })

          isTrue? this.saveBreastSelfEfficacy(data) : this.$message.error('请填写完整！')

        },
        // 保存数据
        saveBreastSelfEfficacy (data) {
           this.service({
                    url:'/ResearchObject/SaveBreastSelfEfficacy',
                    method:'post',
                    data:{
                        SYS_ID: this.breastSelfEfficacyId,
                        ResearchObjectId:this.sysId,
                        Period:this.userBasic.Period,
                        CreateTime: this.CreateTime,
                        Creater:this.userIcon,
                        CreaterId:JSON.parse(this.UserDic).SYS_ID,
                        detailObj:data
                    }
                }).then(response=>{
                    this.$message({
                        message:'保存成功',
                        type:'success'
                    });
                    this.dialogForm1 = false;
                    // that.getList();
                    this.getBreastSelfEfficacy()
                }).catch(err=>{
                    console.log(err)
                })
        },
        CreateTable (){
            let that=this;
            that.$confirm(`是否为该研究对象生成母乳喂养自我效能表？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.service({
                    url:'/ResearchObject/SaveBreastSelfEfficacy',
                    method:'post',
                    data:{
                        ResearchObjectId:that.sysId,
                        Period:that.userBasic.Period,
                        Creater:this.userIcon,
                        CreaterId:JSON.parse(this.UserDic).SYS_ID,
                    }
                }).then(response=>{
                    that.$message({
                        message:'生成成功',
                        type:'success'
                    })
                    // that.getList();
                    this.getBreastSelfEfficacy()
                }).catch(err=>{
                    console.log(err)
                })
            }).catch(() => {
                that.$message({
                    message:'已取消',
                    type:'info'
                })
            });
        },
        getList (){           //获取一级信息列表
            let that=this
            that.userBasic=''
            if(that.resechObj.mobile ||that.resechObj.researchNo){
                that.sysId='';
                that.mobile=that.resechObj.mobile;
                that.researchNo=that.resechObj.researchNo;
            }
            that.service({
                url:'/ResearchObject/GetParticipantDetail',
                method:'get',
                params:{
                    itemType:'12',
                    sysId:'',
                    period:'',
                    researchObjectId:that.sysId,
                    mobile:that.mobile,
                    researchNo:that.researchNo,
                    pageCount:(that.pageId-1),
                    pageSize:that.pageSize,
                }}).then(response=>{
                    response.dtData.dtBasic[0]?that.userBasic=response.dtData.dtBasic[0]:'';
                    console.log(that.userBasic)
                }).catch(data=>{
            })
        },
        getBreastSelfEfficacy() {
            this.service({
                url:'/ResearchObject/GetBreastSelfEfficacy',
                method:'get',
                params:{
                    researchObjectId:this.sysId,
                }}).then(res=>{
                    this.tableData = res.dtData;
	            console.log(res)
                }).catch(data=>{
            })
        }
    },

    filters:{
        GroupType:function(val){
            if(val=='' ||val==undefined){
                return ''
            }
            return val=='1'?'A': 'B'
        },
        IntensityOfIntervention:function(val){
             return filterIntensityOfIntervention(val)
        },
        Period:function(val){
             return filterPeriod(val)
        },
         ChildSex(val){
	         return val=='1'?'男':val=='2'?'女':'未知'
        }
    }
  }
function addZero(s){
    return s < 10 ? '0' + s: s;
}

function dateForm(data){   //日期格式化
    return   new Date(data).getFullYear()+'-'+addZero((new Date(data).getMonth()+1))+'-'+addZero(new Date(data).getDate())
}
function WeeksBetw(date1,date2) {  //计算日期之间相差得天数
    var _dt1=new Date(date1);
    var _dt2=new Date(date2);
    var dt1=_dt1.getTime();
    var dt2=_dt2.getTime();
    return parseInt(Math.abs(dt1- dt2)/1000/60/60/24);//这里是计算天数,如果想获得周数则在该返回值上再除以7
}

</script>
<style scoped lang="scss">
    .user-p1{
        .headerTop{
            margin-bottom: 30px;
            p{
                font-size:16px;
                margin-bottom: 15px;
                color:#303133;
                span{
                    padding:10px;
                }
                .span1{
                    margin-left: 25px;
                }}
            }
        .user-pi-ul{
            margin:0px auto 20px auto;
            li{
                float: left;
                width: 200px;
                margin-right: 20px;
            }
        }

    }
    .formX{
        .top{
            text-align: center;
        }
        ul{
            li{
                margin:20px;
                h3{
                    color: #606266;
                    font-weight: normal;
                }
                h5{
                    font-weight: normal;
                    margin:5px 0;
                }
                p{
                    color: #999999;
                    margin-bottom: 10px;
                }
            }
        }
    }
    .headerTop_ukl{
        /*border:1px solid #EDF1F7;*/
        padding:5px 20px 10px 0px;
        min-width: 800px;
        width:1000px;
        font-size:14px;
    ul{
    li{
        float: left;
        margin-right: 50px;
    .p1{
        color:#999999;
        padding-bottom:5px;
        display: inline-block;
    img{
        display: inline-block;margin-right: 10px;
    };

    }
    .p3{
        display: inline-block;
        padding-left: 10px;
        color: #666;
    }
    }
    }
    }
    .redspan{color: #fff;width: 30px;height: 25px;background: red;display: inline-block;line-height: 25px;}
    .grespan{color: #fff;width: 30px;height: 25px;background:#009900;display: inline-block;line-height: 25px;}
    .twospan{color: #fff;width: 30px;height: 25px;background:#FC9804;display: inline-block;line-height: 25px;}
    .thrspan{color: #7A6266;width: 30px;height: 25px;background:#FFFF00;display: inline-block;line-height: 25px;}
    .fourspan{color: #fff;width: 30px;height: 25px;background:#92D050;display: inline-block;line-height: 25px;}
    .center-waps{margin:15px 0px;}
    .dialog-div{margin:20px 5%}
    .dialog-p1{margin:10px 0px;font-size: 16px;}
    .dialog-p-title{color: #999999;margin:15px 0px;}
</style>

